<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		<title>无标题文档</title>
		<style type="text/css">
			#blue {
				height: 200px;
				background-color: #00F;
				position: relative;
			}
			
			#green {
				height: 200px;
				background-color: #0F0;
			}
		</style>
		<script type="text/javascript">
			function init() {
				var b = document.getElementById("blue");
				var g = document.getElementById("green");
				hides(b, g);
			}

			function getTop(obj) {
				var style = "";
				if(document.defaultView && document.defaultView.getComputedStyle) {
					style = document.defaultView.getComputedStyle(obj);
				} else {
					style = obj.currentStyle;
				}
				return style.top == "auto" ? obj.offsetTop : style.top;
			}

			function hides(b, g) {
				var bw = getTop(b);
				var gw = getTop(g);
				//alert(bw+":"+gw);
				//b.style.height=parseInt(bw)+2+"px";
				//g.style.height=parseInt(gw)-2+"px";
				b.style.top = parseInt(bw) + 2 + "px";
				var p = window.setTimeout(function() {
					hides(b, g)
				}, 100);
				if(parseInt(gw) <= parseInt(bw) + 8) {
					window.clearTimeout(p);
				}
			}
			window.onload = init;
		</script>
	</head>

	<body>
		<div id="blue"></div>
		<div id="green"></div>
	</body>

</html>